<template>
  <el-table
      :data="tableData"
      style="width: 100%"
      max-height="450"
      :border="true"
      :stripe="true">
    <el-table-column
        type="index"
        :index="indexFn"
        fixed
        label="编号"
        width="120">
    </el-table-column>
    <el-table-column
        prop="name"
        label="名称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="desc"
        label="描述"
        align="center">
    </el-table-column>
<!--    <el-table-column-->
<!--        prop="city"-->
<!--        label="市区"-->
<!--        width="120">-->
<!--    </el-table-column>-->
<!--    <el-table-column-->
<!--        prop="address"-->
<!--        label="地址"-->
<!--        width="300">-->
<!--    </el-table-column>-->
<!--    <el-table-column-->
<!--        prop="zip"-->
<!--        label="邮编"-->
<!--        width="120">-->
<!--    </el-table-column>-->
    <el-table-column
        label="操作"
        width="150">
      <template slot-scope="scope">
        <!-- scope 对应的是 当前这一行所对应的那一条数据 -->
        <el-button
            @click="edit(scope)"
            type="default"
            size="small">
          编辑
        </el-button>
        <el-button
            @click="deleteRow(scope)"
            type="danger"
            size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {delateList,getList} from "../../../api/api";

export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    deleteRow(obj) {
      // obj $index 对应的是这条数据索引
      // obj.row  对应的是这一条数据
      // this.tableData.splice(obj.$index,1)
      // 点击删除时要进行询问
      this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确定删除
        // 发送数据请求删除数据
        delateList(obj.row.id).then(data => {
          // 将这条数据从前端删除
          this.tableData.splice(obj.$index,1)
          // 删除成功后再给用户提示
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    indexFn(n) {
      // n 是从0开始的
      return n+1;
    },
    getlist() {
      getList().then(data => {
        this.tableData = data.data
      })
    },
    edit(obj) {
      this.$router.push({path:'/org/add', query: {id:obj.row.id}})
    }
  },



}
</script>